<template>
    <VueDragResize :isActiyve="false" :w="200" :h="0" v-on:resizing="resize" v-on:dragging="resize" :isResizable="false"
        :parentLimitation="false" :parentW="w" :parentH="h" :x="y" :y="150">
        <div class="settingDailog el-fade-in-linear" :class="dailogShow ? 'active' : ''">
            <div class="settingDailog_title">
                <div class="settingDailog_title_content">
                    自定义显示设置
                </div>
                <div class="settingDailog_title_icon el-icon-close" @click="closedSetting">

                </div>
            </div>
            <div class="settingDailog_containers" @mousedown="mouseStop">
                <div class="settingDailog_content">
                    <div class="settingDailog_content_item">
                        <div class="settingDailog_content_item_title">
                            导航图
                        </div>
                        <div class="settingDailog_content_item_btn">
                            <el-switch v-model="navigaMap" active-color="rgb(58, 98, 215)" inactive-color="#999"
                                @change="changeNavigaMap">
                            </el-switch>
                        </div>

                    </div>
                    <div class="settingDailog_content_item">
                        <div class="settingDailog_content_item_title">
                            倍率尺
                        </div>
                        <div class="settingDailog_content_item_btn">
                            <el-switch v-model="multiScale" active-color="rgb(58, 98, 215)" inactive-color="#999"
                                @change="changeMultiScale">
                            </el-switch>
                        </div>

                    </div>
                    <div class="settingDailog_content_item">
                        <div class="settingDailog_content_item_title">
                            比例尺
                        </div>
                        <div class="settingDailog_content_item_btn">
                            <el-switch v-model="compareScale" active-color="rgb(58, 98, 215)" inactive-color="#999"
                                @change="changecompareScale">
                            </el-switch>
                        </div>

                    </div>
                    <div class="settingDailog_content_item">
                        <div class="settingDailog_content_item_title">
                            刻度尺
                        </div>
                        <div class="settingDailog_content_item_btn">
                            <el-switch v-model="dividScale" active-color="rgb(58, 98, 215)" inactive-color="#999"
                                @change="changedividScale">
                            </el-switch>
                        </div>

                    </div>
                    <div class="settingDailog_content_item">
                        <div class="settingDailog_content_item_title">
                            网格线
                        </div>
                        <div class="settingDailog_content_item_btn">
                            <el-switch v-model="gridline" active-color="rgb(58, 98, 215)" inactive-color="#999"
                                @change="changegridline">
                            </el-switch>
                        </div>

                    </div>
                    <div class="settingDailog_content_item">
                        <div class="settingDailog_content_item_title">
                            自动浏览
                        </div>
                        <div class="settingDailog_content_item_btn">
                            <el-switch v-model="autoScan" active-color="rgb(58, 98, 215)" inactive-color="#999"
                                @change="changeAutoScan">
                            </el-switch>
                        </div>

                    </div>
                    <div class="settingDailog_content_item">
                        <div class="settingDailog_content_item_title">
                            旋转浏览
                        </div>
                        <div class="settingDailog_content_item_btn">
                            <el-switch v-model="rotateScan" active-color="rgb(58, 98, 215)" inactive-color="#999"
                                @change="changeRotateScan">
                            </el-switch>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </VueDragResize>
</template>

<script>
const { body } = document
import VueDragResize from 'vue-drag-resize'
export default {
    name: 'setting',
    props: {


    },
    components: {
        VueDragResize
    },

    data() {
        return {
            dailogShow: false,
            autoScan: false,//自动浏览
            navigaMap: true,//导航图
            multiScale: true,//倍率尺
            compareScale: true,//比例尺
            dividScale: false,//刻度尺
            gridline: false, //网格线
            rotateScan: false,//旋转浏览

            width: 0,
            height: 0,
            top: 0,
            w: document.documentElement.clientWidth,
            h: document.documentElement.clientHeight - 50,
            left: 0,
            y: 0
        }
    },
    computed: {

    },
    created() {

    },
    beforeMount() {
        window.addEventListener('resize', this.$_resizeHandlery)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.$_resizeHandlery)
    },
    mounted() {

    },
    methods: {
        mouseStop(e) {
            e.stopPropagation();//阻止冒泡
        },
        $_resizeHandlery() {
            this.y = body.getBoundingClientRect().width - 315
        },
        resize(newRect) {
            this.width = newRect.width
            this.height = newRect.height
            this.top = newRect.top
            this.left = newRect.left
        },
        open() {
            this.y = body.getBoundingClientRect().width - 315
            this.dailogShow = true
        },
        closed() {
            this.dailogShow = false
        },
        closedSetting() {
            this.$emit("closed", 'setting')
        },
        changeRotateScan() {
            let obj = {
                type: 'rotateScan',
                status: this.rotateScan
            }
            this.$emit("changeStatus", obj)
        },
        changeAutoScan() {
            let obj = {
                type: 'autoScan',
                status: this.autoScan
            }
            this.$emit("changeStatus", obj)
        },
        changegridline() {
            let obj = {
                type: 'gridline',
                status: this.gridline
            }
            this.$emit("changeStatus", obj)
        },
        changedividScale() {
            let obj = {
                type: 'dividScale',
                status: this.dividScale
            }
            this.gridline = false
            this.changegridline()
            this.$emit("changeStatus", obj)
        },
        changecompareScale() {
            let obj = {
                type: 'compareScale',
                status: this.compareScale
            }
            this.$emit("changeStatus", obj)
        },
        changeNavigaMap() {
            let obj = {
                type: 'navigaMap',
                status: this.navigaMap
            }
            this.$emit("changeStatus", obj)
        },
        changeMultiScale() {
            let obj = {
                type: 'multiScale',
                status: this.multiScale
            }
            this.$emit("changeStatus", obj)
        }


    }
}
</script>

<style lang="scss" scoped>
.vdr.active:before {
    outline: none !important;
}

.settingDailog {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;

    width: 200px;
    /* top: 150px;
    right: 130px;*/
    z-index: -1;
    -webkit-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
    background-color: rgba(40, 49, 66, .7);
    border-radius: 10px;
    opacity: 0;
    height: 0px;
    padding: 10px;
    position: relative;
    box-sizing: border-box;
    cursor: move;

    .settingDailog_title {
        display: flex;
        color: #fff;
        line-height: 40px;
        align-items: center;
        justify-content: space-between;
        position: relative;

        .settingDailog_title_content {
            font-weight: 400;
        }

        .settingDailog_title_icon {
            cursor: pointer;
        }
    }
}

.settingDailog.active {
    opacity: 1;
    height: 380px;
    z-index: 1;
}

.settingDailog_containers {
    background: #000;
    border-radius: 10px;
    cursor: default;
}

.settingDailog_content_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 10px;
    color: #fff;
}
</style>

